import { Space, Table, Tag,Image,Button,Modal ,Badge } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {useDispatch,useSelector} from "react-redux"
import React,{useEffect,useState} from 'react';
import * as api from "../../api/index"
import Son from "../../componts/Son"
type Props = {}
interface DataType {
  key: string;
  name: string;
  age: number;
  img:string
   state:string
   record:any
}

const stateFn=(key:string)=>{
  switch (key) {
    case "已完成":
      
     return "success"
     case "未完成":
      
     return "error"
     case "进行中":
      
     return "warning"
  
    default:
      break;
  }
}
const Home = (props: Props) => {

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editValue,seteditValue]=useState({})
  // console.log(editValue);
  
  const columns: ColumnsType<DataType> = [
    {
      title: 'Key',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: 'IMG',
      dataIndex: 'img',
      key: 'img',
      render: (_, record) => (
        <Image src={record.img}/>
      ),
    },
    {
      title: 'Address',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: 'state',
      dataIndex: 'state',
      key: 'state',
      render: (_, record) => (
        <Space size="middle">
        <Badge status={stateFn(record.state)}/>
        <span>{record.state}</span>
        </Space>
      ),
    },
    
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
         <Button onClick={()=>{edit(record)}}>编辑</Button>
        </Space>
      ),
    },
  ];
  const dispatch:any=useDispatch()
  const data=useSelector((state:any)=>{
    return state.reducer.data
  })
  // 编辑
  const edit=(record:any)=>{
    // console.log(12312);
    setIsModalVisible(true);
    record.title="编辑"
    seteditValue(record)

  }
  // 增加
  const add=()=>{
    setIsModalVisible(true);
     seteditValue({
      key:data.length+1,
      id:new Date().getTime(),
      name:'',
      city:"",
      state:"",
      title:'新增'
     })
    
  }
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  useEffect(()=>{
  dispatch(api.getlist())
  },[])
  // const handOk=(values:any)=>{
  //   console.log(values);
    
  //  if(values.title==="新增"){
  //   dispatch(api.add_list(values))
  
  //  }else{
  //   dispatch(api.edit_list(values))
  //  }
  // }
  let Tan={isModalVisible,handleCancel,editValue,data}
  return (
    
    <div>
       <Button onClick={add}>新增</Button>
      <Table columns={columns} dataSource={data} pagination={{pageSize:5}}/>
     
      <Son {...Tan}></Son>
    </div>
  )
}

export default Home